<template>
	<div>

		<!-- 卡片 -->
		<el-card class="box-card">
			<div>
				<h4>商户排名</h4>
			</div>
			<!-- table 表格 -->
			<el-table :data="tableData" border style="width: 100%;margin-top: 30px;">
				<el-table-column label="排名">
					<template slot-scope="scope">
						<span>{{handleRanking(scope.$index)}}</span>
					</template>

				</el-table-column>
				<el-table-column prop="name" label="商户名称">
				</el-table-column>
				<el-table-column prop="area" label="门店地址">
				</el-table-column>
				<el-table-column prop="director" label="负责人">
				</el-table-column>
				<el-table-column prop="avg" label="平均星级">
					<template slot-scope="scope">
						<div v-if="scope.row.avg<2"><i class="el-icon-star-off"></i></div>
						<div v-if="scope.row.avg<3 && scope.row.avg>=2"><i class="el-icon-star-off"></i><i
								class="el-icon-star-off"></i></div>
						<div v-if="scope.row.avg<4 && scope.row.avg>=3"><i class="el-icon-star-off"><i
									class="el-icon-star-off"></i><i class="el-icon-star-off"></i></i></div>
						<div v-if="scope.row.avg<5 && scope.row.avg>=4"><i class="el-icon-star-off"></i><i
								class="el-icon-star-off"></i><i class="el-icon-star-off"></i><i
								class="el-icon-star-off"></i></div>
						<div v-if="scope.row.avg>=5"><i class="el-icon-star-off"></i><i class="el-icon-star-off"></i><i
								class="el-icon-star-off"></i><i class="el-icon-star-off"></i><i
								class="el-icon-star-off"></i></div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			
			<!--
				current-page：当前页
				page-sizes：可以选择的每页条数
				layout：要展示的分页的组件
				total：总条数
				@size-change：每页展示的条数发生改变，调用的函数
				@current-change：当前页发生改变时调用的函数
			-->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" :page-sizes="[3,4,5]" :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			
			
		</el-card>
	</div>
</template>

<script>
	export default {
		// 商家排名
		data() {
			return {
				tableData: [],
				total: 0,
				queryInfo: {
					pageNum: 1,
					pageSize: 3
				},


			}
		},
		mounted: function() {
			this.selectRank();

		},
		methods: {
			// 处理排名
			handleRanking(index) {
				if (index == 9) {
					return this.tableData.pageNum + '0'
				}
				let page = this.tableData.pageNum - 1
				let xuhao = index + 1
				return page == 0 ? xuhao : `${page}${xuhao}`
			},
			// 查询排名的方法
			async selectRank() {

				let res = await this.$http.get("http://localhost:8888/selectLevel");
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return;
				} else {
					this.tableData = res.data.data.list
					return;
				}
			},
			
			// 每页显示条数发生改变触发
			handleSizeChange(size){
				this.queryInfo.pageSize=size;
				this.queryInfo.pageNum=1;
				this.selectRank();
			},
			// 当前页发生改变时触发的函数
			handleCurrentChange(pn){
				this.queryInfo.pageNum=pn
				this.selectRank();
			},



		}

	}
</script>

<style scoped>
	.box-card {
		margin-top: 15px;
		text-align: left;
		padding: 20px;
	}
	
	
</style>